import { useEffect, useRef, useState } from 'react';
import style from './index.less';
const Clock: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  let ctx: CanvasRenderingContext2D | null = null;
  const [time, setTime] = useState('');
  let timer: any = null;

  const drawTime = (radius: number) => {
    // 画表针
    const now = new Date();
    const seconds = now.getSeconds();
    const minutes = now.getMinutes();
    const hours = now.getHours();
    setTime(hours + ':' + minutes + ':' + seconds);
    const secondsAngle = ((2 * Math.PI) / 60) * (seconds - 15);
    const minutesAngle = ((2 * Math.PI) / 60) * (minutes - 15) + secondsAngle / 60;
    const hoursAngle = ((2 * Math.PI) / 12) * (hours - 3) + minutesAngle / 12;

    if (ctx) {
      // 绘画秒针
      ctx.beginPath();
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 4;
      ctx.moveTo(0, 0);
      ctx.lineTo(0.8 * radius * Math.cos(secondsAngle), 0.8 * radius * Math.sin(secondsAngle));
      ctx.lineCap = 'round';
      ctx.stroke();
      // ctx.beginPath();

      // 绘画分针
      ctx.beginPath();
      ctx.strokeStyle = 'blue';
      ctx.lineWidth = 4;
      ctx.moveTo(0, 0);
      ctx.lineTo(0.6 * radius * Math.cos(minutesAngle), 0.6 * radius * Math.sin(minutesAngle));
      ctx.lineCap = 'round';
      ctx.stroke();

      // 绘画时针
      ctx.beginPath();
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 4;
      ctx.moveTo(0, 0);
      ctx.lineTo(0.4 * radius * Math.cos(hoursAngle), 0.4 * radius * Math.sin(hoursAngle));
      ctx.lineCap = 'round';
      ctx.stroke();

      ctx.restore();
    }
  };
  const drawScale = () => {
    const radius = 100;
    if (canvasRef.current) {
      ctx = canvasRef.current.getContext('2d')!;
      ctx.restore();
      ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
      // 画圆心两点，做表针中心
      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = 'black';
      ctx.arc(200, 200, 5, 0, 2 * Math.PI);
      ctx.fill();

      ctx.beginPath();
      ctx.fillStyle = 'grey';
      ctx.arc(200, 200, 3, 0, 2 * Math.PI);
      ctx.fill();

      // 平移坐标系
      ctx.translate(200, 200);

      // 画表盘刻度
      ctx.beginPath();
      ctx.strokeStyle = 'black';
      for (let i = 0; i < 60; i++) {
        const angle = ((2 * Math.PI) / 60) * i;
        const x = radius * Math.cos(angle);
        const y = radius * Math.sin(angle);
        ctx.moveTo(x, y);
        if (i % 5 === 0) {
          ctx.lineWidth = 5;
          ctx.lineTo(0.85 * x, 0.85 * y);
          ctx.font = '16px serif';
        } else {
          ctx.lineWidth = 2;
          ctx.lineTo(0.95 * x, 0.95 * y);
        }
      }
      ctx.stroke();
      drawTime(radius);
    }
  };

  useEffect(() => {
    if (canvasRef.current) {
      drawScale();
      timer = setInterval(() => {
        drawScale();
      }, 1000);
    }
    return () => {
      clearInterval(timer);
    };
  }, [canvasRef.current]);

  return (
    <div className={style.wrapper}>
      <h2>北京时间:{time}</h2>
      <canvas ref={canvasRef} width={800} height={500}></canvas>
    </div>
  );
};

export default Clock;
